<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>纯css制作仿微信聊天页面</title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}

			body {
				font-size: 14px;
			}

			.triangle {
				margin: 100px auto;
				width: 600px;
				background-color: #ebebe9;
			}

			.triangle ul {
				padding: 10px;
			}

			.triangle li {
				padding: 5px;
				margin-bottom: 10px;
			}

			.triangle li span {
				position: relative;
				border-radius: 7px;
				background-color: #a6e860;
				padding: 6px 10px 8px 10px;
				z-index: 1;
			}

			.triangle .textLeft span {
				background-color: white;
			}

			.triangle li.textLeft:before {
				content: url("images/tx1.jpg");
				box-sizing: border-box;
				position: relative;
				left: -10px;
				top: 9px;
			}

			.triangle li.textLeft span:before {
				content: "";
				display: block;
				width: 0;
				height: 0;
				border: 8px solid transparent;
				border-right: 8px solid white;
				position: absolute;
				top: 8px;
				left: -16px;
			}

			.triangle li.textRight:after {
				content: url("images/tx2.jpg");
				box-sizing: border-box;
				position: relative;
				right: -10px;
				top: 9px;
			}

			.triangle li.textRight span:after {
				content: "";
				display: block;
				width: 0;
				height: 0;
				border: 8px solid transparent;
				border-left: 8px solid #a6e860;
				position: absolute;
				top: 8px;
				right: -16px;
			}

			li {
				list-style: none;
			}

			.textRight {
				text-align: right;
			}
			.again{
				width:180px;
				height: 180px;
				overflow: hidden;
				position:fixed;
				left: 760px;
				top: 150px;
				cursor:pointer;
				display: none;
				z-index: 99;
			}
			.again img{
				position: absolute;
				top:0;
				left:0;
				width:180px;
				transition:all .5s;
			}
			.again .tixing{
				color:#fff;
			}
			.again .ts{
				position: absolute;
				width:180px;
				height:180px;
				top:0;
				left:0;
				z-index:2;
				line-height:135px;
				text-align: center;
				background-color: rgba(0,0,0,.5);
				opacity: 0;
				overflow: hidden;
			}
			.again:hover .ts{
				opacity: 1;
			}
			.again:hover img{
			    transform:scale(1.2);
			}
			.content{
				width:600px;
				height: 200px;
				position:fixed;
				left: 350px;
				top: 260px;
				display: none;
				color: red;
				overflow: hidden;
				z-index: 80;
				background-color: rgb(128,128,128,0.9);
				border-radius: 15%;
			}
			.content .img-box{
				overflow:hidden;
				position: relative;
				width:110px;
				height:110px;
				display: inline-block;
				cursor:pointer;
				margin-left: 70px;
				margin-top: 35px;
			}
			.content img{
				position: absolute;
				top:0;
				left:0;
				width:110px;
				height: 110px;
				transition:all .5s;
				opacity: 1;
			}
			.content .overlay{
				position: absolute;
				width:110px;
				height: 110px;
				top:0;
				left:0;
				z-index:9;
				line-height:135px;
				text-align: center;
				background-color: rgba(0,0,0,.5);
				opacity: 0;
			}
			.content .title{
			    color:#fff;
			}
			.img-box:hover img{
			    transform:scale(1.2);
			}
			.img-box:hover .overlay{
			    opacity: 1;
			}
			.right{
				width: 467px;
				height: 710px;
				position: fixed;
				left: 0px;
				top: 0px;
			}
			.left{
				width: 467px;
				height: 710px;
				position: fixed;
				right: 0px;
				top: 0px;
			}
			.xts{
				position: fixed;
				width: 1000px;
				height: 650px;
				overflow: hidden;
				left: 300px;
				top: 50px;
				z-index: 100;
				display: none;
			}
			.xts #xt{
				position: absolute;
				left: 0px;
				top: 0px;
				width: 1000px;
				height: 650px;
				z-index: 101;
			}
			.cha{
				position: absolute;
				z-index: 102;
				width: 80px;
				height: 80px;
				left: 0px;
			}
			.hongse{
				position:absolute;
				width:80px;
				height: 80px;
				top:0px;
				left:0px;
				z-index:103;
				background-color: rgba(255,0,0,.5);
				opacity: 0;
			}
			.cc:hover .hongse{
				opacity: 1;
			}
			.cc{
				position: fixed;
				z-index: 102;
				width: 80px;
				height: 80px;
				left: 1220px;
				top: 50px;
				cursor:pointer;
			}
		</style>
		<script src="首页/jswj/jquery-2.2.4.js"></script>
	</head>
	<body>
		<img src="首页/img/rw2.png" alt="" class="right">
		<img src="首页/img/rw1.png" alt="" class="left">
		<div class="triangle">
			<div class="again" id="again">
				<img src="首页/img/再来一次.png" alt="">
				<div class="ts">
					<div class="tixing">这都被骗，再来一次吧</div>
				</div>
			</div>
			<div id="zuihou" class="content">
				<div id="xiajie" class="img-box">
					<img src="首页/img/下阶段.png" alt="" id="xiajieduan">
					<div class="overlay">
					    <div class="title" id='xuan1'>下阶段</div>
					</div>
				</div>
				<div id="xiaotiesi" class="img-box">
					<img src="首页/img/小贴士.png" alt="" id="xiaotiesi">
					<div class="overlay">
						<div class="title" id="xuan2">小贴士</div>
					</div>
				</div>
				<div id="xiaoyouxi" class="img-box">
					<img src="首页/img/小游戏.png" alt="" id="xiaoyouxi">
					<div class="overlay">
						<div class="title" id="xuan3">小游戏</div>
					</div>
				</div>
			</div>
			<p>微wei聊天界面</p>
			<hr>
			<div id="kuan">
				<ul>
					<li class="textLeft">
						<span>请问你是想买游戏账号吗</span>
					</li>
					<li class="textRight" id="ll">
						<span>
							<select name="" id="diyige">
								<option value="0">是的</option>
								<option value="1">不是</option>
							</select>
							<input type="button" value="确定" id='first'>
						</span>
					</li>
				</ul>
			</div>
			<div id="z">
				<li class="textLeft" id="yy">
					<span>你是我接的第一个单，我这里有个优惠链接</span>
				</li>
				<li class="textLeft" id="yz">
					<span>里面可能会有免费的游戏账号</span>
				</li>
				<li class="textLeft" id="zx">
					<span>我们这里有活动可以免费领取游戏皮肤，也可以高价收取游戏账号</span>
				</li>
				<li class="textLeft" id="zk">
					<span>还可以有充值优惠，你看你有什么需要</span>
				</li>
			</div>
			<div id="a">
				<li class="textRight"><span>
						<select name="" id="dierge">
							<option value="0">我想看一下那个免费领取皮肤的活动</option>
							<option value="1">不需要</option>
						</select>
						<input type="button" value="确定" id="second"></span>
				</li>
			</div>
			<div id="y">
				<li class="textLeft" id="xy"><span>你点击一下这个链接就可以取到</span></li>
				<li class="textLeft" id="xk"><span>我们这里会经常出活动，你如果有想法，我们会第一时间通知你</span></li>
			</div>
			<div id="b">
				<li class="textRight"><span>
						<select name="" id="disange">
							<option value="0">好</option>
							<option value="1">不用了</option>
						</select>
						<input type="button" value="确定" id="third"></span>
				</li>
			</div>
			<div id="c">
				<li class="textLeft" id="tyj">
					<span>扫一下二维码关注一下我，这样我好第一时间通知你</span>
				</li>
				<li class="textLeft" id="wmw">
					<span>那你可以帮我点击一下这链接吗？我第一次做这个</span>
				</li>
				<li class="textLeft" id="gsy">
					<span>没有销量，会被老板骂的</span>
				</li>
			</div>
			<div id='f'>
				<li class="textRight">
					<span>
						<select name="" id="disige">
							<option value="0">好吧</option>
							<option value="1">不听不听</option>
						</select>
						<input type="button" value="确定" id='fourth' >
					</span>
				</li>
			</div>
		</div>
		<div class="xts" id="xts">
			<img src="首页/img/游戏诈骗提醒.png" alt="" id="xt">
			<div class="cc" id="cc">
				<img src="首页/img/叉.png" alt="" id="cha" class="cha">
				<div class="hongse"></div>
			</div>	
		</div>
		<script>
			$(function() {
				var ab = document.getElementById('a')
				ab.style.display = 'none'
				var abc = document.getElementById('b')
				abc.style.display = 'none'
				var dd = document.getElementById('f')
				dd.style.display = 'none'
				document.getElementById('yy').style.display = 'none'
				document.getElementById('yz').style.display = 'none'
				document.getElementById('ll').style.display = 'none'
				document.getElementById('zx').style.display = 'none'
				document.getElementById('zk').style.display = 'none'
				var xuanxiang = $('#first')
				setTimeout(function() {
					$('#ll').show()
				}, 1000);
				key = 0;
				xuanxiang.click(function() {
					key = key + 1;
					var who = $('#diyige').val()
					var words = $('#z')
					if (who == 0 && key == 1) {
						setTimeout(function() {
							$('#yy').show()
						}, 1000);
						setTimeout(function() {
							$('#yz').show()
						}, 1500);
						setTimeout(function() {
							document.getElementById('again').style.display='block'
						}, 2000);
					} else if (who == 1 && key == 1) {
						setTimeout(function() {
							$('#zx').show()
						}, 1500);setTimeout(function() {
							$('#zk').show()
						}, 2000);
						setTimeout(function() {
							$('#a').show()
						}, 2500);
					}
				});
				var key1 = 0;
				document.getElementById('xy').style.display='none'
				document.getElementById('xk').style.display='none'
				$('#second').click(function() {
					key1++;
					var w = $('#dierge').val()
					if (w == 0 && key1 == 1) {
						setTimeout(function() {
							$('#xy').show()
						}, 1000);
						setTimeout(function() {
							document.getElementById('again').style.display='block'
						}, 1500);
						
					} else if (w == 1 && key1 == 1) {
						setTimeout(function() {
							$('#xk').show()
						}, 1000); 
						setTimeout(function() {
							$('#b').show()
						}, 1500);
					}
				})
				var key2 = 0;
				document.getElementById('tyj').style.display='none'
				document.getElementById('wmw').style.display='none'
				document.getElementById('gsy').style.display='none'
				$('#third').click(function() {
					key2++;
					var y = $('#disange').val()
					if (y == 0 && key2 == 1) {
						setTimeout(function() {
							$('#tyj').show()
						}, 1000);
						setTimeout(function() {
							document.getElementById('again').style.display='block'
						}, 1500);
					} else if (y == 1 && key2 == 1) {
						setTimeout(function() {
							$('#wmw').show()
						}, 1000);setTimeout(function() {
							$('#gsy').show()
						}, 1500);
						setTimeout(function() {
							$('#f').show()
						}, 2000);
					}
				})
				var key4=0;
				$('#fourth').click(function(){
					key4++;
					var val=$('#disige').val()
					if(key4==1&&val==0){
						document.getElementById('again').style.display='block'
					}else{
						document.getElementById('zuihou').style.display='block'
					}
				})
				document.getElementById('again').onclick=function(){
					location.reload();
				}
				$('#xiajie').click(function(){
						window.location.href="new_file.html"
				})
				$('#xiaotiesi').click(function(){
					document.getElementById('xts').style.display='block'
				})
				$('#xiaoyouxi').click(function(){
					window.location.href='记忆反诈.html'
				})
				document.getElementById('cc').onclick=function(){
					document.getElementById('xts').style.display='none'
				}
			})
		</script>
	</body>
</html>
